﻿<template>
    <my-dialog :width="width" v-model="state.dlgVisible" :title="title">
        <el-form ref="elForm" :model="search2" label-width="100px" :label-position="$mbh5?'top':'right'">
            <el-form-item :label="col.label" v-for="col in cols" :key="col.code">
                <el-select v-if="col.control == 'combo' || col.control=='radio'" v-model="search2[col.code]" style="width:100%;">
                    <el-option v-if="col.searchAll != false" :label="'-' + col.label + '-'" value=""></el-option>
                    <template v-if="isSelectGroup(col.options)">
                        <el-option-group
                            v-for="group in selectGroups(col.options)"
                            :label="group.label"
                            :key="group.label"
                        >
                            <el-option
                                v-for="item in group.items"
                                :label="item.label"
                                :value="item.value"
                                :key="item.value"
                            ></el-option>
                        </el-option-group>
                    </template>
                    <template v-else>
                        <el-option
                            v-for="item in col.options"
                            :label="item.label"
                            :value="item.value"
                            :key="item.value"
                        ></el-option>
                    </template>
                </el-select>
                <el-input-number v-else-if="col.control == 'number'" v-model="search2[col.code]" style="width:100%;">
                </el-input-number>

                <el-date-picker v-else-if="col.control == 'date'" v-model="search2[col.code]" style="width:100%;">
                </el-date-picker>

                <my-select v-else-if="col.control == 'select'" v-model="search2[col.code]" style="width:100%;"
                    v-bind="col.select" :title="col.label" allowEmpty :formData="search2" :options="col.options">
                </my-select>
                <my-select-input v-else-if="col.control == 'selectinput'" v-model="search2[col.code]" :formData="search2"
                    v-bind="col.selectinput" style="width:100%;"></my-select-input>
                <MyCheckBox3 v-else-if="col.control == 'check' || col.control == 'MyCheckBox3'" v-model="search2[col.code]">{{ col.label }}</MyCheckBox3>
                <el-input :placeholder="getPlaceholder(col)" style="width:100%;" 
                    v-else-if="col.control == 'text' || col.control == 'textarea'" v-model="search2[col.code]"></el-input>
                <template v-else-if="col.control == 'hidden'"></template>
                <component v-else-if="isCusComponent(col.control)" 
                    :is="col.control" 
                    v-model="search2[col.code]" 
                    :placeholder="getPlaceholder(col)"  
                    v-bind="col[col.control]"
                    style="max-width: 300px"/>
                <el-input v-else v-model="search2[col.code]" style="width:100%;" clearable></el-input>
            </el-form-item>
        </el-form>

        <template #footer>
            <el-button type="" @click="state.dlgVisible = false">取消</el-button>
            <el-button type="danger" @click="doClear">清空</el-button>
            <el-button type="primary" @click="doSave">搜索</el-button>
        </template>
    </my-dialog>

</template>

<script>
import {mydate, Utils} from './main';
import {resolveComponent} from 'vue'
export default {
    name: "MySearchDlg",
    emits: ["search"],
    props: {
        tbname: {
            type: String,
            required: true
        },
        search:Object,
        title: {
            type: String,
            default: "搜索"
        },
        width: {
            type: [Number, String],
            default: 400
        },
        excludeSearch: String//排除在外的搜索字段
    },
    data() {
        return {
            state: {
                dlgVisible: false,
            },
            search2: {

            },
            cols: []
        }
    },
    mounted() {
        this.loadCfg();
    },
    methods: {
        open(){
            this.state.dlgVisible = true;
            this.search2 = {...this.search};
        },
        isCusComponent(cmpName){
            let cmp = resolveComponent(cmpName);
            return typeof(cmp)=="object";
        },
        loadCfg() {
            if (this.tbname == "") return;
            this.$server.getDM(this.tbname).then(res => {
                let ee = this.excludeSearch?this.excludeSearch.replaceAll(",",";").split(";").filter(p => p.length > 0):[];
                this.cols = (Utils.getTbSearchFields(res) || []).filter(p=>p.control!='hidden' && ee.indexOf(p.code)==-1);
            })
        },
        doSave() {
            this.$emit("search", this.search2);
            this.state.dlgVisible = false;
        },
        doClear() {
            this.$server.getDM(this.tbname).then(tb=>{
                for (var ix in this.cols) {
                    let col = this.cols[ix];
                    let key = col.code;
                    this.search2[key] = (tb.search2 && tb.search2[key]) ? tb.search2?.default: undefined;
                }
                this.doSave();
            });
        },
        open(search2) {
            this.search2 = { ...search2 };
            this.state.dlgVisible = true;
        },
        getLabel(col) {
            if (["combo", "select", "check"].indexOf(col.control) != -1) {
                return "";
            }
            return col.label;
        },
        isSelectGroup(options){
            return options && options.length>0 && options[0].group;
        },
        selectGroups(ops){
            let groups = {};
            ops.forEach(p => {
                let key = p.group || "";
                groups[key] = groups[key] || [];
                groups[key].push(p);
            });
            return Object.keys(groups).map(key=>{
                return {label:key, items:groups[key]}
            });
        },
        getPlaceholder(col) {
            return col.placeholder || col.label || "";
        },
    },
    watch: {
        tbname() {
            this.loadCfg();
        },
        excludeSearch(){
            this.$server.getDM(this.tbname).then(res => {
                let ee = this.excludeSearch?this.excludeSearch.replaceAll(",",";").split(";").filter(p => p.length > 0):[];
                this.cols = (Utils.getTbSearchFields(res) || []).filter(p=>p.control!='hidden' && ee.indexOf(p.code)==-1);
            })
        },
        search(){
            this.search2 = {...this.search}
        }
    }
}

</script>